import React, { use, useEffect, useState } from 'react';
import { Button, Input, message, notification, Segmented } from 'antd';
import { FolderAddOutlined, InfoCircleOutlined, SearchOutlined, UsergroupAddOutlined, UserOutlined, WarningOutlined } from '@ant-design/icons';
import http from '~/api/http';
import type { IGanyut,IGanyutadd } from '~/types/ganyut';
import { data } from 'react-router';

// 题目数据 - 每个选项都有对应的分数
const quizQuestions = [
  {
    id: 6,
    question: "大便干结难排，小便量少、颜色偏黄。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 7,
    question: "经常感觉口渴，喝水后缓解不明显，或伴有咽喉干痛",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 8,
    question: "眼睛干涩、视物模糊，尤其在疲劳或环境干燥时更明显。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 9,
    question: "舌头颜色偏红、舌苔少或无苔；脉搏跳动偏快、且脉象细弱。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 10,
    question: "皮肤干燥、缺乏光泽，甚至脱屑；头发干枯、易断裂或脱落疏散。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  }
];

const quizQuestions1 = [
  {
    id: 1,
    question: "小便次数增多，尤其夜间起夜频繁，尿液清澈量多。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 2,
    question: "食欲较差，吃生冷食物后易腹胀、腹泻，大便偏稀不成形",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 3,
    question: "容易疲倦乏力，缺乏活力，稍微活动就觉得累，甚至懒得说话",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 4,
    question: "对冷风敏感，喜欢待在温暖处，穿衣服比旁人更多，冬季更难适应寒冷。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 5,
    question: "即使在温暖环境中，也常感觉手脚冰凉、全身发冷，尤其下肢和腹部更明显。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  }
];

const quizQuestions2 = [
  {
    id: 11,
    question: "可能出现白天不自主出汗（自汗），活动后出汗更明显",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 12,
    question: "食欲不佳，饭后容易腹胀；大便可能偏稀不成形，或排便无力。",
    options: [
     { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 13,
    question: "说话声音低微，不想主动与人交流，甚至多说几句话就觉得费力。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 14,
    question: "日常容易感到累，四肢沉重无力，即使没有剧烈活动也总觉得精神不济。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 15,
    question: "呼吸偏浅、气短，稍微活动就容易气喘；抵抗力较差，容易感冒，且感冒后恢复较慢。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  }
];

const quizQuestions3 = [
  {
    id: 16,
    question: "感觉四肢沉重、身体发懒，像裹了一层湿布，活动后也难缓解。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 17,
    question: "小便颜色偏黄、量少，排尿时可能有尿道灼热感，甚至尿频、尿急。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 18,
    question: "经常觉得口干，但不想喝水，或喝水后仍不解渴；嘴里发苦，尤其早上起床后明显。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 19,
    question: "面部、胸背易出油，可能长痤疮、粉刺，或出现湿疹、皮炎，瘙痒时抓挠易流出黏腻液体。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 20,
    question: "容易心烦、脾气急躁，部分人会有午后低热，或身体局部（如手脚心）发热，且热感难散去。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  }
];

const quizQuestions4 = [
  {
    id: 21,
    question: "R咽喉部总感觉有异物堵塞，咳不出来也咽不下去（称为 “梅核气”）；",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:22,
    question: "经常感到心情压抑、闷闷不乐，对事物缺乏兴趣，甚至出现悲观、焦虑的状态。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:23,
    question: "容易烦躁易怒，一点小事就忍不住发火，或情绪敏感、多愁善感，常觉得委屈想哭。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:24,
    question: "注意力难以集中，记忆力减退，还可能伴有失眠多梦，尤其容易在睡前胡思乱想、难以入眠。",
    options: [
     { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 25,
    question: "身体多出现 “胀痛”，且疼痛位置不固定，如胸胁部、腹部、头部胀痛，按压或叹气后疼痛可能暂时缓解。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  }
];

const quizQuestions5 = [
  {
    id: 26,
    question: "以 “刺痛” 为主，疼痛位置固定不变，按压时疼痛会明显加重。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:27,
    question: "疼痛常在夜间加重，因为夜间血液运行速度减慢，瘀滞更明显。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:28,
    question: "好发于胸胁部、腹部、关节处，女性也常出现小腹部刺痛（与月经相关）",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:29,
    question: "舌质颜色紫暗，舌面上可能出现紫色瘀点或瘀斑，舌下静脉也会变粗、发紫、曲张；部分人可能有毛发干枯、易脱落的情况。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:30,
    question: "面部、口唇、指甲颜色偏暗、发紫，或出现瘀斑、瘀点；皮肤干燥、粗糙，缺乏光泽，甚至出现皮肤甲错（像鱼鳞一样干燥脱屑）。",
    options: [
     { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  }
];

const quizQuestions6 = [
  {
    id: 31,
    question: "或大便不规律（时而干结、时而稀溏），甚至排便黏滞、马桶挂壁。",
    options: [
     { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:32,
    question: "原本食欲适中、饭后无不适，现在可能出现食欲变差、吃一点就腹胀",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:33,
    question: "原本不易累，现在稍活动就觉得疲倦、四肢无力，或总感觉精神不济、想犯困。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:34,
    question: "原本很少感冒，现在变得容易着凉，或感冒后恢复变慢，甚至反复出现咳嗽、鼻塞等。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 35,
    question: "原本注意力集中、记忆力好，现在变得容易走神、健忘，或反应变慢、思维混乱，做事效率下降。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  }
];

const quizQuestions7 = [
  {
    id: 36,
    question: "反复长湿疹、皮炎，抓挠后症状加重。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:37,
    question: "接触花粉、尘螨、动物毛发或吃特定食物后，易出现皮肤瘙痒、红疹",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:38,
    question: "对温度、湿度变化敏感，天气转凉或变热时易感冒；对某些药物（如青霉素）敏感",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:39,
    question: "吃海鲜、牛奶、芒果等食物后，可能出现腹痛、腹泻、恶心、呕吐，或口腔黏膜瘙痒。",
    options: [
     { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 40,
    question: "春秋季或接触过敏原后，易打喷嚏、流清鼻涕、鼻塞，或诱发过敏性鼻炎、哮喘，表现为咳嗽、胸闷、呼吸不畅",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  }
];

const quizQuestions8 = [
  {
    id: 41,
    question: "头发油腻、易打结，掉发较多。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:42,
    question: "多为肥胖体型，尤其腹部肥满松软，按压时无明显疼痛，皮肤摸起来偏凉、黏腻。",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:43,
    question: "常感觉四肢沉重、乏力，不想活动，走路时像拖着重物，起床后仍觉得没精神（“睡不醒”）。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id:44,
    question: "面部、头皮易出油，皮肤容易长痤疮、粉刺，且痘痘多为红肿、有白色脓头（含黏稠分泌物）",
    options: [
       { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  },
  {
    id: 45,
    question: "频繁咳痰，痰液颜色偏白、质地黏稠，不易咳出；口腔内黏腻发甜，不想喝水，或喝水后仍觉口干不缓解。",
    options: [
      { text: "没有(根本不)", score: 0},
      { text: "很少(有一点)", score:1 },      // 正确答案
      { text: "有时(有些)", score: 2 },
      { text: "经常(相当)", score: 3 },
      { text: "总是(非常)", score: 4}
    ]
  }
];
interface AddFormProps {
  onSuccess?: () => void; // 提交成功的回调
  onCancel?: () => void;
 // 关闭弹窗的回调
}
// 计算总分（所有选项的最高分数之和）
const calculateTotalPossibleScore = () => {
  return quizQuestions.reduce((total, question) => {
    const maxScore = Math.max(...question.options.map(option => option.score));
    return total + maxScore;
  }, 0);
};

const calculateTotalPossibleScore1 = () => {
  return quizQuestions1.reduce((total, question) => {
    const maxScore = Math.max(...question.options.map(option => option.score));
    return total + maxScore;
  }, 0);
};

const calculateTotalPossibleScore2 = () => {
  return quizQuestions2.reduce((total, question) => {
    const maxScore = Math.max(...question.options.map(option => option.score));
    return total + maxScore;
  }, 0);
};

const calculateTotalPossibleScore3 = () => {
  return quizQuestions3.reduce((total, question) => {
    const maxScore = Math.max(...question.options.map(option => option.score));
    return total + maxScore;
  }, 0);
};

const calculateTotalPossibleScore4 = () => {
  return quizQuestions4.reduce((total, question) => {
    const maxScore = Math.max(...question.options.map(option => option.score));
    return total + maxScore;
  }, 0);
};

const calculateTotalPossibleScore5 = () => {
  return quizQuestions5.reduce((total, question) => {
    const maxScore = Math.max(...question.options.map(option => option.score));
    return total + maxScore;
  }, 0);
};

const calculateTotalPossibleScore6 = () => {
  return quizQuestions6.reduce((total, question) => {
    const maxScore = Math.max(...question.options.map(option => option.score));
    return total + maxScore;
  }, 0);
};

const calculateTotalPossibleScore7 = () => {
  return quizQuestions7.reduce((total, question) => {
    const maxScore = Math.max(...question.options.map(option => option.score));
    return total + maxScore;
  }, 0);
};

const calculateTotalPossibleScore8 = () => {
  return quizQuestions8.reduce((total, question) => {
    const maxScore = Math.max(...question.options.map(option => option.score));
    return total + maxScore;
  }, 0);
};

const FinalScoreQuiz:React.FC<AddFormProps> = ({onSuccess,onCancel}) => {
  // 状态管理
  const [answers, setAnswers] = useState(
    quizQuestions.map(() => ({
      selectedOption: null
    }))
  );
  const [answers1, setAnswers1] = useState(
    quizQuestions1.map(() => ({
      selectedOption: null
    }))
  );
    const [answers2, setAnswers2] = useState(
    quizQuestions2.map(() => ({
      selectedOption: null
    }))
  );

    const [answers3, setAnswers3] = useState(
    quizQuestions3.map(() => ({
      selectedOption: null
    }))
  );

     const [answers4, setAnswers4] = useState(
    quizQuestions4.map(() => ({
      selectedOption: null
    }))
  );
     const [answers5, setAnswers5] = useState(
    quizQuestions5.map(() => ({
      selectedOption: null
    }))
  );

   const [answers6, setAnswers6] = useState(
    quizQuestions6.map(() => ({
      selectedOption: null
    }))
  );

    const [answers7, setAnswers7] = useState(
    quizQuestions7.map(() => ({
      selectedOption: null
    }))
  );

    const [answers8, setAnswers8] = useState(
    quizQuestions8.map(() => ({
      selectedOption: null
    }))
  );
  //------------------------------------------------
  const [submitted, setSubmitted] = useState(false);
  const [score, setScore] = useState(0);
  const totalPossibleScore = calculateTotalPossibleScore();
  const [isVisible, setIsVisible] = React.useState(false);

  const [submitted1, setSubmitted1] = useState(false);
  const [score1, setScore1] = useState(0);
  const totalPossibleScore1 = calculateTotalPossibleScore1();
  const [isVisible1, setIsVisible1] = React.useState(true);

  const [submitted2, setSubmitted2] = useState(false);
  const [score2, setScore2] = useState(0);
  const totalPossibleScore2 = calculateTotalPossibleScore2();
  const [isVisible2, setIsVisible2] = React.useState(false);

  const [submitted3, setSubmitted3] = useState(false);
  const [score3, setScore3] = useState(0);
  const totalPossibleScore3 = calculateTotalPossibleScore3(); 
  const [isVisible3, setIsVisible3] = React.useState(false);

  const [submitted4, setSubmitted4] = useState(false);
  const [score4, setScore4] = useState(0);
  const totalPossibleScore4 = calculateTotalPossibleScore4();
  const [isVisible4, setIsVisible4] = React.useState(false);

  const [submitted5, setSubmitted5] = useState(false);
  const [score5, setScore5] = useState(0);
  const totalPossibleScore5 = calculateTotalPossibleScore5();
  const [isVisible5, setIsVisible5] = React.useState(false);

  const [submitted6, setSubmitted6] = useState(false);
  const [score6, setScore6] = useState(0);
  const totalPossibleScore6 = calculateTotalPossibleScore6();
  const [isVisible6, setIsVisible6] = React.useState(false);

  const [submitted7, setSubmitted7] = useState(false);
  const [score7, setScore7] = useState(0);
  const totalPossibleScore7 = calculateTotalPossibleScore7();
  const [isVisible7, setIsVisible7] = React.useState(false);

  const [submitted8, setSubmitted8] = useState(false);
  const [score8, setScore8] = useState(0);
  const totalPossibleScore8 = calculateTotalPossibleScore8();
  const [isVisible8, setIsVisible8] = React.useState(false);

  const [name,setname]=useState('')
  const [sex,setsex]=useState('')
  const [age,setage]=useState(0)
  const [bid,setbid]=useState(0)
  const [inputvalue,setinputvalue]=useState('')
//------------------------------------------------------------
  // 处理选项选择
  const handleOptionSelect = (questionIndex, optionIndex) => {
    // 如果已提交，则不允许修改
    if (submitted) return;
    
    const newAnswers = [...answers];
    newAnswers[questionIndex].selectedOption = optionIndex;
    setAnswers(newAnswers);
  };

    const handleOptionSelect1 = (questionIndex, optionIndex) => {
    // 如果已提交，则不允许修改
    if (submitted1) return;
    
    const newAnswers = [...answers1];
    newAnswers[questionIndex].selectedOption = optionIndex;
    setAnswers1(newAnswers);
  };

    const handleOptionSelect2 = (questionIndex, optionIndex) => {
    // 如果已提交，则不允许修改
    if (submitted2) return;
    
    const newAnswers = [...answers2];
    newAnswers[questionIndex].selectedOption = optionIndex;
    setAnswers2(newAnswers);
  };

    const handleOptionSelect3 = (questionIndex, optionIndex) => {
    // 如果已提交，则不允许修改
    if (submitted3) return;
    
    const newAnswers = [...answers3];
    newAnswers[questionIndex].selectedOption = optionIndex;
    setAnswers3(newAnswers);
  };

   const handleOptionSelect4 = (questionIndex, optionIndex) => {
    // 如果已提交，则不允许修改
    if (submitted4) return;
    
    const newAnswers = [...answers4];
    newAnswers[questionIndex].selectedOption = optionIndex;
    setAnswers4(newAnswers);
  };

  const handleOptionSelect5 = (questionIndex, optionIndex) => {
    // 如果已提交，则不允许修改
    if (submitted5) return;
    
    const newAnswers = [...answers5];
    newAnswers[questionIndex].selectedOption = optionIndex;
    setAnswers5(newAnswers);
  };

  const handleOptionSelect6 = (questionIndex, optionIndex) => {
    // 如果已提交，则不允许修改
    if (submitted6) return;
    
    const newAnswers = [...answers6];
    newAnswers[questionIndex].selectedOption = optionIndex;
    setAnswers6(newAnswers);
  };

    const handleOptionSelect7 = (questionIndex, optionIndex) => {
    // 如果已提交，则不允许修改
    if (submitted7) return;
    
    const newAnswers = [...answers7];
    newAnswers[questionIndex].selectedOption = optionIndex;
    setAnswers7(newAnswers);
  };

    const handleOptionSelect8 = (questionIndex, optionIndex) => {
    // 如果已提交，则不允许修改
    if (submitted8) return;
    
    const newAnswers = [...answers8];
    newAnswers[questionIndex].selectedOption = optionIndex;
    setAnswers8(newAnswers);
  };
//------------------------------------------------------------
  // 提交答案并计算分数
  const handleSubmit = () => {
    // 检查是否所有题目都已回答
    const allAnswered = answers.every(answer => answer.selectedOption !== null);
    if (!allAnswered) {
      alert("请完成所有题目后再提交");
      return;
    }
    
    // 计算总分
    let totalScore = 0;
    answers.forEach((answer, index) => {
      totalScore += quizQuestions[index].options[answer.selectedOption].score;
    });
    
    setScore(totalScore);
    setSubmitted(true);
  };

   const handleSubmit1 = () => {
    // 检查是否所有题目都已回答
    const allAnswered = answers1.every(answer => answer.selectedOption !== null);
    if (!allAnswered) {
      alert("请完成所有题目后再提交");
      return;
    }
    
    // 计算总分
    let totalScore = 0;
    answers1.forEach((answer, index) => {
      totalScore += quizQuestions1[index].options[answer.selectedOption].score;
    });
    
    setScore1(totalScore);
    setSubmitted1(true);
  };

    const handleSubmit2 = () => {
    // 检查是否所有题目都已回答
    const allAnswered = answers2.every(answer => answer.selectedOption !== null);
    if (!allAnswered) {
      alert("请完成所有题目后再提交");
      return;
    }
    
    // 计算总分
    let totalScore = 0;
    answers2.forEach((answer, index) => {
      totalScore += quizQuestions2[index].options[answer.selectedOption].score;
    });
    
    setScore2(totalScore);
    setSubmitted2(true);
  };

  const handleSubmit3 = () => {
    // 检查是否所有题目都已回答
    const allAnswered = answers3.every(answer => answer.selectedOption !== null);
    if (!allAnswered) {
      alert("请完成所有题目后再提交");
      return;
    }
    
    // 计算总分
    let totalScore = 0;
    answers3.forEach((answer, index) => {
      totalScore += quizQuestions3[index].options[answer.selectedOption].score;
    });
    
    setScore3(totalScore);
    setSubmitted3(true);
  };

   const handleSubmit4 = () => {
    // 检查是否所有题目都已回答
    const allAnswered = answers4.every(answer => answer.selectedOption !== null);
    if (!allAnswered) {
      alert("请完成所有题目后再提交");
      return;
    }
    
    // 计算总分
    let totalScore = 0;
    answers4.forEach((answer, index) => {
      totalScore += quizQuestions4[index].options[answer.selectedOption].score;
    });
    
    setScore4(totalScore);
    setSubmitted4(true);
  };

    const handleSubmit5 = () => {
    // 检查是否所有题目都已回答
    const allAnswered = answers5.every(answer => answer.selectedOption !== null);
    if (!allAnswered) {
      alert("请完成所有题目后再提交");
      return;
    }
    
    // 计算总分
    let totalScore = 0;
    answers5.forEach((answer, index) => {
      totalScore += quizQuestions5[index].options[answer.selectedOption].score;
    });
    
    setScore5(totalScore);
    setSubmitted5(true);
  };

    const handleSubmit6 = () => {
    // 检查是否所有题目都已回答
    const allAnswered = answers6.every(answer => answer.selectedOption !== null);
    if (!allAnswered) {
      alert("请完成所有题目后再提交");
      return;
    }
    
    // 计算总分
    let totalScore = 0;
    answers6.forEach((answer, index) => {
      totalScore += quizQuestions6[index].options[answer.selectedOption].score;
    });
    
    setScore6(totalScore);
    setSubmitted6(true);
  };

      const handleSubmit7 = () => {
    // 检查是否所有题目都已回答
    const allAnswered = answers7.every(answer => answer.selectedOption !== null);
    if (!allAnswered) {
      alert("请完成所有题目后再提交");
      return;
    }
    
    // 计算总分
    let totalScore = 0;
    answers7.forEach((answer, index) => {
      totalScore += quizQuestions7[index].options[answer.selectedOption].score;
    });
    
    setScore7(totalScore);
    setSubmitted7(true);
  };

      const handleSubmit8 = () => {
    // 检查是否所有题目都已回答
    const allAnswered = answers8.every(answer => answer.selectedOption !== null);
    if (!allAnswered) {
      alert("请完成所有题目后再提交");
      return;
    }
    
    // 计算总分
    let totalScore = 0;
    answers8.forEach((answer, index) => {
      totalScore += quizQuestions8[index].options[answer.selectedOption].score;
    });
    
    setScore8(totalScore);
    setSubmitted8(true);
  };
  // 重新开始测验
  const handleRestart = () => {
    setAnswers(
      quizQuestions.map(() => ({
        selectedOption: null
      }))
    );
    setSubmitted(false);
    setScore(0);
  };

  const handleRestart1 = () => {
    setAnswers1(
      quizQuestions1.map(() => ({
        selectedOption: null
      }))
    );
    setSubmitted1(false);
    setScore1(0);
  };
   const handleRestart2 = () => {
    setAnswers2(
      quizQuestions2.map(() => ({
        selectedOption: null
      }))
    );
    setSubmitted2(false);
    setScore2(0);
  };
  const handleRestart3 = () => {
    setAnswers3(
      quizQuestions3.map(() => ({
        selectedOption: null
      }))
    );
    setSubmitted3(false);
    setScore3(0);
  };

    const handleRestart4 = () => {
    setAnswers4(
      quizQuestions4.map(() => ({
        selectedOption: null
      }))
    );
    setSubmitted4(false);
    setScore4(0);
  };

   const handleRestart5 = () => {
    setAnswers5(
      quizQuestions5.map(() => ({
        selectedOption: null
      }))
    );
    setSubmitted5(false);
    setScore5(0);
  };

   const handleRestart6 = () => {
    setAnswers6(
      quizQuestions6.map(() => ({
        selectedOption: null
      }))
    );
    setSubmitted6(false);
    setScore6(0);
  };

     const handleRestart7 = () => {
    setAnswers7(
      quizQuestions7.map(() => ({
        selectedOption: null
      }))
    );
    setSubmitted7(false);
    setScore7(0);
  };

     const handleRestart8 = () => {
    setAnswers8(
      quizQuestions8.map(() => ({
        selectedOption: null
      }))
    );
    setSubmitted8(false);
    setScore8(0);
  };
const changeCount1 = (event: React.ChangeEvent<HTMLInputElement>) => {
        setinputvalue(event.target.value);
}

  const fetchUsers = async (value:string) => {
    
    const response = await http.getList<IGanyut>('Order/chay', {})

const bb=response.data.filter(u=>u.fileNumber==value&&u.orderStatus=='正在体检')
console.log(bb,'zz')
if (bb.length > 0) {
 setname(bb[0].name)
 setage(bb[0].age)
  setsex(bb[0].sex)
  setbid(bb[0].hid)
}else{
  console.log("未找到")
    message.warning('未找到匹配的档案信息');
}
  }
 /*  useEffect(() => {
    //初始化数据
    fetchUsers()
  }, []) */

  const dian= ()=>{
 if (inputvalue.trim()) {
       fetchUsers(inputvalue);
     } else {
       message.warning('请输入档案号');
     }
  }
  const ganyut1:IGanyutadd={
    id:0,
    pdata:new Date,
    qi:0,
    yan:0,
    yin:0,
    te:0,
    yang:0,
    xue:0,
    shi:0,
    yu:0,
    pin:0,
    bid:0
  }
   const [api, contextHolder] = notification.useNotification();
   const openNotification =  (pauseOnHover: boolean) => async () => {
 console.log("zz",ganyut1)
 
    if(score1==0){
    api.open({
      message: '未填写完整',
      description:
        '阳虚题未选完',
      showProgress: true,
      pauseOnHover,
    });
    return;
  }else{
    if(score1<7){
      ganyut1.yang=0
    }else{
      ganyut1.yang=1
    }
  }
    if(score==0){
    api.open({
      message: '未填写完整',
      description:
        '阴虚题未选完',
      showProgress: true,
      pauseOnHover,
      icon: <InfoCircleOutlined style={{ color: '#1890ff', fontSize: 20 }} />, // 蓝色信息图标
    style: {
      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', // 轻微阴影
    },
    });
    return;
  }else{
    if(score<7){
      ganyut1.yin=0
    }else{
      ganyut1.yin=1
    }
  }

   if(score2==0){
    api.open({
      message: '未填写完整',
      description:
        '气虚题未选完',
      showProgress: true,
       pauseOnHover,
    icon: <WarningOutlined style={{ color: '#faad14', fontSize: 20 }} />, // 黄色警告图标
    style: {
      borderRadius: 8, // 圆角优化
    }
    });
    return;
  }else{
    if(score2<7){
      ganyut1.qi=0
    }else{
      ganyut1.qi=1
    }
  }

     if(score3==0){
    api.open({
      message: '未填写完整',
      description:
        '湿热题未选完',
      showProgress: true,
       pauseOnHover,
    icon: <WarningOutlined style={{ color: '#faad14', fontSize: 20 }} />, // 黄色警告图标
    style: {
      borderRadius: 8, // 圆角优化
    }
    });
    return;
  }else{
    if(score3<7){
      ganyut1.shi=0
    }else{
      ganyut1.shi=1
    }
  }

     if(score4==0){
    api.open({
      message: '未填写完整',
      description:
        '气郁题未选完',
      showProgress: true,
       pauseOnHover,
    icon: <WarningOutlined style={{ color: '#faad14', fontSize: 20 }} />, // 黄色警告图标
    style: {
      borderRadius: 8, // 圆角优化
    }
    });
    return;
  }else{
    if(score4<7){
      ganyut1.yu=0
    }else{
      ganyut1.yu=1
    }
  }

     if(score5==0){
    api.open({
      message: '未填写完整',
      description:
        '血瘀题未选完',
      showProgress: true,
       pauseOnHover,
    icon: <WarningOutlined style={{ color: '#faad14', fontSize: 20 }} />, // 黄色警告图标
    style: {
      borderRadius: 8, // 圆角优化
    }
    });
    return;
  }else{
    if(score5<7){
      ganyut1.xue=0
    }else{
      ganyut1.xue=1
    }
  }

     if(score6==0){
    api.open({
      message: '未填写完整',
      description:
        '平和题未选完',
      showProgress: true,
       pauseOnHover,
    icon: <WarningOutlined style={{ color: '#faad14', fontSize: 20 }} />, // 黄色警告图标
    style: {
      borderRadius: 8, // 圆角优化
    }
    });
    return;
  }else{
    if(score6<7){
      ganyut1.pin=0
    }else{
      ganyut1.pin=1
    }
  }

     if(score7==0){
    api.open({
      message: '未填写完整',
      description:
        '特禀题未选完',
      showProgress: true,
       pauseOnHover,
    icon: <WarningOutlined style={{ color: '#faad14', fontSize: 20 }} />, // 黄色警告图标
    style: {
      borderRadius: 8, // 圆角优化
    }
    });
    return;
  }else{
    if(score7<7){
      ganyut1.te=0
    }else{
      ganyut1.te=1
    }
  }

       if(score8==0){
    api.open({
      message: '未填写完整',
      description:
        '痰湿题未选完',
      showProgress: true,
       pauseOnHover,
    icon: <WarningOutlined style={{ color: '#faad14', fontSize: 20 }} />, // 黄色警告图标
    style: {
      borderRadius: 8, // 圆角优化
    }
    });
    return;
  }else{
    if(score8<7){
      ganyut1.yan=0
    }else{
      ganyut1.yan=1
    }
  }
   const currentTime = new Date();

  // 格式化时间（示例：2025-10-22 15:30:45）
  const formattedTime = currentTime.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
  ganyut1.bid=bid
 
  //const zz=await http.post<IGanyutadd>('Ganyut',ganyut1)
  try {
    const bb = await http.post<IGanyutadd>('Ganyut', ganyut1);
    // 请求成功后的逻辑（如提示成功、刷新数据）
    console.log('添加成功', bb);
    message.success('添加成功')
    onSuccess()

  } catch (error) {
    // 处理错误（如提示用户、打印错误日志）
    console.error('请求失败', error);
    // 可选：抛出错误让上层处理
    // throw error;
  }
 
  };

  // 检查是否所有题目都已回答
  const allAnswered = answers.every(answer => answer.selectedOption !== null);
  const allAnswered1 = answers1.every(answer => answer.selectedOption !== null);
  const allAnswered2 = answers2.every(answer => answer.selectedOption !== null);
  const allAnswered3 = answers3.every(answer => answer.selectedOption !== null);
  const allAnswered4 = answers4.every(answer => answer.selectedOption !== null);
  const allAnswered5 = answers5.every(answer => answer.selectedOption !== null);
  const allAnswered6 = answers6.every(answer => answer.selectedOption !== null);
   const allAnswered7 = answers7.every(answer => answer.selectedOption !== null);
    const allAnswered8 = answers8.every(answer => answer.selectedOption !== null);

  return (
    
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-8 px-4">
          <div style={{ position: 'relative', marginBottom: '16px' }}>
        <span style={{ position: 'absolute', left: '20px', top: '0' }}>档案号</span>
         <Input onChange={changeCount1} value={inputvalue}  size="small" style={{width:150,position: 'absolute', left: '70px', top: '0'}} placeholder="档案号..." prefix={<UserOutlined />} /> 
          <Button icon={<SearchOutlined />} style={{position: 'absolute', left: '220px', top: '0',height:25}}  target="_blank" onClick={dian} />
          <span style= {{ position: 'absolute', left: '280px', top: '0' }}>姓名:{name}</span>
           <span style= {{ position: 'absolute', left: '360px', top: '0' }}>性别:{sex}</span>
           <span style= {{ position: 'absolute', left: '450px', top: '0' }}>年龄:{age}</span>
        <br></br>
       
      <Segmented<string>
        options={['阳虚测', '阴虚测', '气虚测', '湿热测', '气郁测','血瘀测','平和测','特禀测','痰湿测']}
        onChange={(value) => {
          if(value === '阴虚测') {
            setIsVisible(true)
              setIsVisible1(false)
              setIsVisible2(false)
              setIsVisible3(false)
               setIsVisible4(false)
               setIsVisible5(false)
                setIsVisible6(false)
                 setIsVisible7(false)
              setIsVisible8(false)
          }else if(value=='阳虚测'){
            setIsVisible1(true)
              setIsVisible(false)
              setIsVisible2(false)
              setIsVisible3(false)
               setIsVisible4(false)
               setIsVisible5(false)
                setIsVisible6(false)
                 setIsVisible7(false)
              setIsVisible8(false)
              console.log(score)
               console.log(score1)
                console.log(score2)
                 console.log(score3)
          }else if(value=='气虚测'){
             setIsVisible2(true)
              setIsVisible(false)
              setIsVisible1(false)
              setIsVisible3(false)
               setIsVisible4(false)
               setIsVisible5(false)
                setIsVisible6(false)
                 setIsVisible7(false)
              setIsVisible8(false)
          }else if(value=='湿热测'){
            setIsVisible2(false)
              setIsVisible(false)
              setIsVisible1(false)
              setIsVisible3(true)
               setIsVisible4(false)
               setIsVisible5(false)
                setIsVisible6(false)
                 setIsVisible7(false)
              setIsVisible8(false)

          }else if(value=='气郁测'){
            setIsVisible2(false)
              setIsVisible(false)
              setIsVisible1(false)
              setIsVisible3(false)
              setIsVisible4(true)
               setIsVisible5(false)
                setIsVisible6(false)
                 setIsVisible7(false)
              setIsVisible8(false)

          }else if(value=='血瘀测'){
            setIsVisible2(false)
              setIsVisible(false)
              setIsVisible1(false)
              setIsVisible3(false)
              setIsVisible4(false)            
              setIsVisible6(false)
              setIsVisible5(true)
               setIsVisible7(false)
              setIsVisible8(false)
          }else if(value=='平和测'){
            setIsVisible2(false)
              setIsVisible(false)
              setIsVisible1(false)
              setIsVisible3(false)
              setIsVisible4(false)
               setIsVisible5(false)
                setIsVisible6(true)
                 setIsVisible7(false)
                 setIsVisible8(false)

          }else if(value=='特禀测'){
             setIsVisible2(false)
              setIsVisible(false)
              setIsVisible1(false)
              setIsVisible3(false)
              setIsVisible4(false)
              setIsVisible5(false)
              setIsVisible6(false)
              setIsVisible7(true)
               
              setIsVisible8(false)
          }else if(value=='痰湿测'){
             setIsVisible2(false)
              setIsVisible(false)
              setIsVisible1(false)
              setIsVisible3(false)
              setIsVisible4(false)
              setIsVisible5(false)
              setIsVisible6(false)
              setIsVisible7(false)
              setIsVisible8(true)
              
          }
        }}
      />
       <Button
         type="primary"
          size="small"
          onClick={openNotification(true)}
           icon={<UsergroupAddOutlined />}
        style={{left:260}}>添加</Button>
         {contextHolder}
   <div style={{ display: isVisible8 ? 'block' : 'none'}} className="max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-4 md:p-5">
  {/* 标题：缩小字体+减少底部间距 */}
  <h1 className="text-2xl font-bold text-center mb-3 text-indigo-600">痰湿体质</h1>
  
  {/* 进度显示：减少内边距和底部间距 */}
  <div className="mb-3 p-3 bg-indigo-50 rounded-lg">
    <div className="flex justify-between items-center mb-2">
      <span className="font-medium text-gray-700">
        已完成: {answers8.filter(a => a.selectedOption !== null).length}/{quizQuestions8.length}
      </span>
      {submitted8 && (
        <span className="font-medium text-indigo-600">
          你的得分: {score8}/{totalPossibleScore8}
        </span>
      )}
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
        style={{ 
          width: `${(answers8.filter(a => a.selectedOption !== null).length / quizQuestions8.length) * 100}%` 
        }}
      ></div>
    </div>
  </div>
  
  {/* 所有题目列表：减少题目间距和卡片内边距 */}
  <div className="space-y-2">
    {quizQuestions8.map((question, questionIndex) => (
      <div 
        key={question.id} 
        className="p-3 border rounded-lg transition-all hover:shadow-sm"
        style={{
          borderColor: answers8[questionIndex].selectedOption !== null ? '#6366f1' : '#e5e7eb'
        }}
      >
        <div className="flex items-start mb-2"> {/* 减少题目标题底部间距 */}
          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center font-medium mr-2 mt-0.5">
            {question.id}
          </span>
          <h3 className="text-base font-semibold text-gray-800">{question.question}</h3> {/* 缩小题目文字 */}
        </div>
        
        {/* 横向排列的单选按钮组：减少选项内边距和间距 */}
        <div className="pl-8 flex flex-wrap gap-2"> {/* 减少左侧缩进和选项间距 */}
          {question.options.map((option, optionIndex) => {
            const isSelected = answers8[questionIndex].selectedOption === optionIndex;
            
            // 确定选项的样式：减少选项内边距
            let labelClasses = "flex items-center p-1.5 rounded transition-all cursor-pointer whitespace-nowrap text-sm";
            let radioClasses = "w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300";
            
            if (!submitted8) {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " hover:bg-gray-50 border border-transparent hover:border-gray-200";
            } else {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " bg-gray-50 border border-gray-200";
              radioClasses += " cursor-not-allowed";
            }
            
            return (
              <label 
                key={optionIndex}
                htmlFor={`q${question.id}-opt${optionIndex}`}
                className={labelClasses}
                onClick={() => handleOptionSelect8(questionIndex, optionIndex)}
                style={{ cursor: submitted8 ? 'default' : 'pointer' }}
              >
                <input
                  id={`q${question.id}-opt${optionIndex}`}
                  type="radio"
                  name={`question-${question.id}`}
                  checked={isSelected}
                  disabled={submitted8}
                  className={radioClasses}
                  readOnly
                />
                <span className="ml-1.5"> {/* 减少文字与单选框间距 */}
                  {option.text}
                  <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-100 rounded-full text-gray-700">
                    {option.score}分
                  </span>
                </span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
  
  {/* 提交按钮或结果显示：减少按钮内边距和结果区边距 */}
  <div className="mt-4">
    {!submitted8 ? (
      <button
        onClick={handleSubmit8}
        disabled={!allAnswered8}
        className={`w-full py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm ${
          allAnswered8
            ? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
            : 'bg-gray-200 text-gray-500 cursor-not-allowed'
        }`}
      >
        提交答案
      </button>
    ) : (
      <div className="p-3 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
        <h3 className="text-lg font-bold text-center mb-1 text-indigo-700">测验完成！</h3> {/* 缩小结果标题+减少间距 */}
        <p className="text-center mb-2 text-sm"> {/* 减少结果文字间距+缩小字体 */}
         
          <span className="block text-xs text-gray-600 mt-1"> {/* 缩小病情提示文字 */}
            病情: {score8<7?"无":"痰湿"}
          </span>
        </p>
        <button
          onClick={handleRestart8}
          className="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm"
        >
          重新开始测验
        </button>
      </div>
    )}
  </div>
</div>


<div style={{ display: isVisible7 ? 'block' : 'none'}} className="max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-4 md:p-5">
  {/* 标题：缩小字体+减少底部间距 */}
  <h1 className="text-2xl font-bold text-center mb-3 text-indigo-600">特禀体质</h1>
  
  {/* 进度显示：减少内边距和底部间距 */}
  <div className="mb-3 p-3 bg-indigo-50 rounded-lg">
    <div className="flex justify-between items-center mb-2">
      <span className="font-medium text-gray-700">
        已完成: {answers7.filter(a => a.selectedOption !== null).length}/{quizQuestions7.length}
      </span>
      {submitted7 && (
        <span className="font-medium text-indigo-600">
          你的得分: {score7}/{totalPossibleScore7}
        </span>
      )}
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
        style={{ 
          width: `${(answers7.filter(a => a.selectedOption !== null).length / quizQuestions7.length) * 100}%` 
        }}
      ></div>
    </div>
  </div>
  
  {/* 所有题目列表：减少题目间距和卡片内边距 */}
  <div className="space-y-2">
    {quizQuestions7.map((question, questionIndex) => (
      <div 
        key={question.id} 
        className="p-3 border rounded-lg transition-all hover:shadow-sm"
        style={{
          borderColor: answers7[questionIndex].selectedOption !== null ? '#6366f1' : '#e5e7eb'
        }}
      >
        <div className="flex items-start mb-2"> {/* 减少题目标题底部间距 */}
          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center font-medium mr-2 mt-0.5">
            {question.id}
          </span>
          <h3 className="text-base font-semibold text-gray-800">{question.question}</h3> {/* 缩小题目文字 */}
        </div>
        
        {/* 横向排列的单选按钮组：减少选项内边距和间距 */}
        <div className="pl-8 flex flex-wrap gap-2"> {/* 减少左侧缩进和选项间距 */}
          {question.options.map((option, optionIndex) => {
            const isSelected = answers7[questionIndex].selectedOption === optionIndex;
            
            // 确定选项的样式：减少选项内边距
            let labelClasses = "flex items-center p-1.5 rounded transition-all cursor-pointer whitespace-nowrap text-sm";
            let radioClasses = "w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300";
            
            if (!submitted7) {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " hover:bg-gray-50 border border-transparent hover:border-gray-200";
            } else {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " bg-gray-50 border border-gray-200";
              radioClasses += " cursor-not-allowed";
            }
            
            return (
              <label 
                key={optionIndex}
                htmlFor={`q${question.id}-opt${optionIndex}`}
                className={labelClasses}
                onClick={() => handleOptionSelect7(questionIndex, optionIndex)}
                style={{ cursor: submitted7 ? 'default' : 'pointer' }}
              >
                <input
                  id={`q${question.id}-opt${optionIndex}`}
                  type="radio"
                  name={`question-${question.id}`}
                  checked={isSelected}
                  disabled={submitted7}
                  className={radioClasses}
                  readOnly
                />
                <span className="ml-1.5"> {/* 减少文字与单选框间距 */}
                  {option.text}
                  <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-100 rounded-full text-gray-700">
                    {option.score}分
                  </span>
                </span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
  
  {/* 提交按钮或结果显示：减少按钮内边距和结果区边距 */}
  <div className="mt-4">
    {!submitted7 ? (
      <button
        onClick={handleSubmit7}
        disabled={!allAnswered7}
        className={`w-full py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm ${
          allAnswered7
            ? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
            : 'bg-gray-200 text-gray-500 cursor-not-allowed'
        }`}
      >
        提交答案
      </button>
    ) : (
      <div className="p-3 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
        <h3 className="text-lg font-bold text-center mb-1 text-indigo-700">测验完成！</h3> {/* 缩小结果标题+减少间距 */}
        <p className="text-center mb-2 text-sm"> {/* 减少结果文字间距+缩小字体 */}
          
          <span className="block text-xs text-gray-600 mt-1"> {/* 缩小病情提示文字 */}
            病情: {score7<7?"无":"特禀"}
          </span>
        </p>
        <button
          onClick={handleRestart7}
          className="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm"
        >
          重新开始测验
        </button>
      </div>
    )}
  </div>
</div>


 <div style={{ display: isVisible6 ? 'block' : 'none'}} className="max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-4 md:p-5">
  {/* 标题：字体缩小+底部间距减少 */}
  <h1 className="text-2xl font-bold text-center mb-3 text-indigo-600">平和体质</h1>
  
  {/* 进度显示：内边距+底部间距缩减 */}
  <div className="mb-3 p-3 bg-indigo-50 rounded-lg">
    <div className="flex justify-between items-center mb-2">
      <span className="font-medium text-gray-700">
        已完成: {answers6.filter(a => a.selectedOption !== null).length}/{quizQuestions6.length}
      </span>
      {submitted6 && (
        <span className="font-medium text-indigo-600">
          你的得分: {score6}/{totalPossibleScore6}
        </span>
      )}
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
        style={{ 
          width: `${(answers6.filter(a => a.selectedOption !== null).length / quizQuestions6.length) * 100}%` 
        }}
      ></div>
    </div>
  </div>
  
  {/* 题目列表：间距+内边距压缩 */}
  <div className="space-y-2">
    {quizQuestions6.map((question, questionIndex) => (
      <div 
        key={question.id} 
        className="p-3 border rounded-lg transition-all hover:shadow-sm"
        style={{
          borderColor: answers6[questionIndex].selectedOption !== null ? '#6366f1' : '#e5e7eb'
        }}
      >
        <div className="flex items-start mb-2"> {/* 题目标题底部间距减少 */}
          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center font-medium mr-2 mt-0.5">
            {question.id}
          </span>
          <h3 className="text-base font-semibold text-gray-800">{question.question}</h3> {/* 题目文字缩小 */}
        </div>
        
        {/* 选项组：缩进+内边距+间距缩减 */}
        <div className="pl-8 flex flex-wrap gap-2">
          {question.options.map((option, optionIndex) => {
            const isSelected = answers6[questionIndex].selectedOption === optionIndex;
            
            let labelClasses = "flex items-center p-1.5 rounded transition-all cursor-pointer whitespace-nowrap text-sm";
            let radioClasses = "w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300";
            
            if (!submitted6) {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " hover:bg-gray-50 border border-transparent hover:border-gray-200";
            } else {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " bg-gray-50 border border-gray-200";
              radioClasses += " cursor-not-allowed";
            }
            
            return (
              <label 
                key={optionIndex}
                htmlFor={`q${question.id}-opt${optionIndex}`}
                className={labelClasses}
                onClick={() => handleOptionSelect6(questionIndex, optionIndex)}
                style={{ cursor: submitted6 ? 'default' : 'pointer' }}
              >
                <input
                  id={`q${question.id}-opt${optionIndex}`}
                  type="radio"
                  name={`question-${question.id}`}
                  checked={isSelected}
                  disabled={submitted6}
                  className={radioClasses}
                  readOnly
                />
                <span className="ml-1.5"> {/* 选项文字与单选框间距减少 */}
                  {option.text}
                  <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-100 rounded-full text-gray-700">
                    {option.score}分
                  </span>
                </span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
  
  {/* 提交区：按钮内边距+结果区边距缩减 */}
  <div className="mt-4">
    {!submitted6 ? (
      <button
        onClick={handleSubmit6}
        disabled={!allAnswered6}
        className={`w-full py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm ${
          allAnswered6
            ? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
            : 'bg-gray-200 text-gray-500 cursor-not-allowed'
        }`}
      >
        提交答案
      </button>
    ) : (
      <div className="p-3 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
        <h3 className="text-lg font-bold text-center mb-1 text-indigo-700">测验完成！</h3> {/* 结果标题缩小+间距减少 */}
        <p className="text-center mb-2 text-sm"> {/* 结果文字缩小+间距减少 */}
       
          <span className="block text-xs text-gray-600 mt-1"> {/* 病情提示文字缩小 */}
            病情: {score6<7?"无":"平和"}
          </span>
        </p>
        <button
          onClick={handleRestart6}
          className="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm"
        >
          重新开始测验
        </button>
      </div>
    )}
  </div>
</div>


<div style={{ display: isVisible5 ? 'block' : 'none'}} className="max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-4 md:p-5">
  {/* 标题：字体缩小+底部间距减少 */}
  <h1 className="text-2xl font-bold text-center mb-3 text-indigo-600">血瘀体质</h1>
  
  {/* 进度显示：内边距+底部间距缩减 */}
  <div className="mb-3 p-3 bg-indigo-50 rounded-lg">
    <div className="flex justify-between items-center mb-2">
      <span className="font-medium text-gray-700">
        已完成: {answers5.filter(a => a.selectedOption !== null).length}/{quizQuestions5.length}
      </span>
      {submitted5 && (
        <span className="font-medium text-indigo-600">
          你的得分: {score5}/{totalPossibleScore5}
        </span>
      )}
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
        style={{ 
          width: `${(answers5.filter(a => a.selectedOption !== null).length / quizQuestions5.length) * 100}%` 
        }}
      ></div>
    </div>
  </div>
  
  {/* 题目列表：间距+内边距压缩 */}
  <div className="space-y-2">
    {quizQuestions5.map((question, questionIndex) => (
      <div 
        key={question.id} 
        className="p-3 border rounded-lg transition-all hover:shadow-sm"
        style={{
          borderColor: answers5[questionIndex].selectedOption !== null ? '#6366f1' : '#e5e7eb'
        }}
      >
        <div className="flex items-start mb-2"> {/* 题目标题底部间距减少 */}
          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center font-medium mr-2 mt-0.5">
            {question.id}
          </span>
          <h3 className="text-base font-semibold text-gray-800">{question.question}</h3> {/* 题目文字缩小 */}
        </div>
        
        {/* 选项组：缩进+内边距+间距缩减 */}
        <div className="pl-8 flex flex-wrap gap-2">
          {question.options.map((option, optionIndex) => {
            const isSelected = answers5[questionIndex].selectedOption === optionIndex;
            
            let labelClasses = "flex items-center p-1.5 rounded transition-all cursor-pointer whitespace-nowrap text-sm";
            let radioClasses = "w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300";
            
            if (!submitted5) {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " hover:bg-gray-50 border border-transparent hover:border-gray-200";
            } else {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " bg-gray-50 border border-gray-200";
              radioClasses += " cursor-not-allowed";
            }
            
            return (
              <label 
                key={optionIndex}
                htmlFor={`q${question.id}-opt${optionIndex}`}
                className={labelClasses}
                onClick={() => handleOptionSelect5(questionIndex, optionIndex)}
                style={{ cursor: submitted5 ? 'default' : 'pointer' }}
              >
                <input
                  id={`q${question.id}-opt${optionIndex}`}
                  type="radio"
                  name={`question-${question.id}`}
                  checked={isSelected}
                  disabled={submitted5}
                  className={radioClasses}
                  readOnly
                />
                <span className="ml-1.5"> {/* 选项文字与单选框间距减少 */}
                  {option.text}
                  <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-100 rounded-full text-gray-700">
                    {option.score}分
                  </span>
                </span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
  
  {/* 提交区：按钮内边距+结果区边距缩减 */}
  <div className="mt-4">
    {!submitted5 ? (
      <button
        onClick={handleSubmit5}
        disabled={!allAnswered5}
        className={`w-full py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm ${
          allAnswered5
            ? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
            : 'bg-gray-200 text-gray-500 cursor-not-allowed'
        }`}
      >
        提交答案
      </button>
    ) : (
      <div className="p-3 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
        <h3 className="text-lg font-bold text-center mb-1 text-indigo-700">测验完成！</h3> {/* 结果标题缩小+间距减少 */}
        <p className="text-center mb-2 text-sm"> {/* 结果文字缩小+间距减少 */}
        
          <span className="block text-xs text-gray-600 mt-1"> {/* 病情提示文字缩小 */}
            病情: {score5<7?"无":"血瘀"}
          </span>
        </p>
        <button
          onClick={handleRestart5}
          className="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm"
        >
          重新开始测验
        </button>
      </div>
    )}
  </div>
</div>


<div style={{ display: isVisible4 ? 'block' : 'none'}} className="max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-4 md:p-5">
  {/* 标题：字体缩小+底部间距减少 */}
  <h1 className="text-2xl font-bold text-center mb-3 text-indigo-600">气郁体质</h1>
  
  {/* 进度显示：内边距+底部间距缩减 */}
  <div className="mb-3 p-3 bg-indigo-50 rounded-lg">
    <div className="flex justify-between items-center mb-2">
      <span className="font-medium text-gray-700">
        已完成: {answers4.filter(a => a.selectedOption !== null).length}/{quizQuestions4.length}
      </span>
      {submitted4 && (
        <span className="font-medium text-indigo-600">
          你的得分: {score4}/{totalPossibleScore4}
        </span>
      )}
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
        style={{ 
          width: `${(answers4.filter(a => a.selectedOption !== null).length / quizQuestions4.length) * 100}%` 
        }}
      ></div>
    </div>
  </div>
  
  {/* 题目列表：间距+内边距压缩 */}
  <div className="space-y-2">
    {quizQuestions4.map((question, questionIndex) => (
      <div 
        key={question.id} 
        className="p-3 border rounded-lg transition-all hover:shadow-sm"
        style={{
          borderColor: answers4[questionIndex].selectedOption !== null ? '#6366f1' : '#e5e7eb'
        }}
      >
        <div className="flex items-start mb-2"> {/* 题目标题底部间距减少 */}
          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center font-medium mr-2 mt-0.5">
            {question.id}
          </span>
          <h3 className="text-base font-semibold text-gray-800">{question.question}</h3> {/* 题目文字缩小 */}
        </div>
        
        {/* 选项组：缩进+内边距+间距缩减 */}
        <div className="pl-8 flex flex-wrap gap-2">
          {question.options.map((option, optionIndex) => {
            const isSelected = answers4[questionIndex].selectedOption === optionIndex;
            
            let labelClasses = "flex items-center p-1.5 rounded transition-all cursor-pointer whitespace-nowrap text-sm";
            let radioClasses = "w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300";
            
            if (!submitted4) {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " hover:bg-gray-50 border border-transparent hover:border-gray-200";
            } else {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " bg-gray-50 border border-gray-200";
              radioClasses += " cursor-not-allowed";
            }
            
            return (
              <label 
                key={optionIndex}
                htmlFor={`q${question.id}-opt${optionIndex}`}
                className={labelClasses}
                onClick={() => handleOptionSelect4(questionIndex, optionIndex)}
                style={{ cursor: submitted4 ? 'default' : 'pointer' }}
              >
                <input
                  id={`q${question.id}-opt${optionIndex}`}
                  type="radio"
                  name={`question-${question.id}`}
                  checked={isSelected}
                  disabled={submitted4}
                  className={radioClasses}
                  readOnly
                />
                <span className="ml-1.5"> {/* 选项文字与单选框间距减少 */}
                  {option.text}
                  <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-100 rounded-full text-gray-700">
                    {option.score}分
                  </span>
                </span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
  
  {/* 提交区：按钮内边距+结果区边距缩减 */}
  <div className="mt-4">
    {!submitted4 ? (
      <button
        onClick={handleSubmit4}
        disabled={!allAnswered4}
        className={`w-full py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm ${
          allAnswered4
            ? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
            : 'bg-gray-200 text-gray-500 cursor-not-allowed'
        }`}
      >
        提交答案
      </button>
    ) : (
      <div className="p-3 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
        <h3 className="text-lg font-bold text-center mb-1 text-indigo-700">测验完成！</h3> {/* 结果标题缩小+间距减少 */}
        <p className="text-center mb-2 text-sm"> {/* 结果文字缩小+间距减少 */}
          
          <span className="block text-xs text-gray-600 mt-1"> {/* 病情提示文字缩小 */}
            病情: {score4<7?"无":"气郁"}
          </span>
        </p>
        <button
          onClick={handleRestart4}
          className="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm"
        >
          重新开始测验
        </button>
      </div>
    )}
  </div>
</div>


<div style={{ display: isVisible3 ? 'block' : 'none'}} className="max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-4 md:p-5">
  {/* 标题：字体缩小+底部间距减少 */}
  <h1 className="text-2xl font-bold text-center mb-3 text-indigo-600">湿热体质</h1>
  
  {/* 进度显示：内边距+底部间距缩减 */}
  <div className="mb-3 p-3 bg-indigo-50 rounded-lg">
    <div className="flex justify-between items-center mb-2">
      <span className="font-medium text-gray-700">
        已完成: {answers3.filter(a => a.selectedOption !== null).length}/{quizQuestions3.length}
      </span>
      {submitted3 && (
        <span className="font-medium text-indigo-600">
          你的得分: {score3}/{totalPossibleScore3}
        </span>
      )}
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
        style={{ 
          width: `${(answers3.filter(a => a.selectedOption !== null).length / quizQuestions3.length) * 100}%` 
        }}
      ></div>
    </div>
  </div>
  
  {/* 题目列表：间距+内边距压缩 */}
  <div className="space-y-2">
    {quizQuestions3.map((question, questionIndex) => (
      <div 
        key={question.id} 
        className="p-3 border rounded-lg transition-all hover:shadow-sm"
        style={{
          borderColor: answers3[questionIndex].selectedOption !== null ? '#6366f1' : '#e5e7eb'
        }}
      >
        <div className="flex items-start mb-2"> {/* 题目标题底部间距减少 */}
          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center font-medium mr-2 mt-0.5">
            {question.id}
          </span>
          <h3 className="text-base font-semibold text-gray-800">{question.question}</h3> {/* 题目文字缩小 */}
        </div>
        
        {/* 选项组：缩进+内边距+间距缩减 */}
        <div className="pl-8 flex flex-wrap gap-2">
          {question.options.map((option, optionIndex) => {
            const isSelected = answers3[questionIndex].selectedOption === optionIndex;
            
            let labelClasses = "flex items-center p-1.5 rounded transition-all cursor-pointer whitespace-nowrap text-sm";
            let radioClasses = "w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300";
            
            if (!submitted3) {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " hover:bg-gray-50 border border-transparent hover:border-gray-200";
            } else {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " bg-gray-50 border border-gray-200";
              radioClasses += " cursor-not-allowed";
            }
            
            return (
              <label 
                key={optionIndex}
                htmlFor={`q${question.id}-opt${optionIndex}`}
                className={labelClasses}
                onClick={() => handleOptionSelect3(questionIndex, optionIndex)}
                style={{ cursor: submitted3 ? 'default' : 'pointer' }}
              >
                <input
                  id={`q${question.id}-opt${optionIndex}`}
                  type="radio"
                  name={`question-${question.id}`}
                  checked={isSelected}
                  disabled={submitted3}
                  className={radioClasses}
                  readOnly
                />
                <span className="ml-1.5"> {/* 选项文字与单选框间距减少 */}
                  {option.text}
                  <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-100 rounded-full text-gray-700">
                    {option.score}分
                  </span>
                </span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
  
  {/* 提交区：按钮内边距+结果区边距缩减 */}
  <div className="mt-4">
    {!submitted3 ? (
      <button
        onClick={handleSubmit3}
        disabled={!allAnswered3}
        className={`w-full py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm ${
          allAnswered3
            ? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
            : 'bg-gray-200 text-gray-500 cursor-not-allowed'
        }`}
      >
        提交答案
      </button>
    ) : (
      <div className="p-3 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
        <h3 className="text-lg font-bold text-center mb-1 text-indigo-700">测验完成！</h3> {/* 结果标题缩小+间距减少 */}
        <p className="text-center mb-2 text-sm"> {/* 结果文字缩小+间距减少 */}
         
          <span className="block text-xs text-gray-600 mt-1"> {/* 病情提示文字缩小 */}
            病情: {score3<7?"无":"湿热"}
          </span>
        </p>
        <button
          onClick={handleRestart3}
          className="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm"
        >
          重新开始测验
        </button>
      </div>
    )}
  </div>
</div>


<div style={{ display: isVisible2 ? 'block' : 'none'}} className="max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-4 md:p-5">
  {/* 标题：字体缩小+底部间距减少 */}
  <h1 className="text-2xl font-bold text-center mb-3 text-indigo-600">气虚体质</h1>
  
  {/* 进度显示：内边距+底部间距缩减 */}
  <div className="mb-3 p-3 bg-indigo-50 rounded-lg">
    <div className="flex justify-between items-center mb-2">
      <span className="font-medium text-gray-700">
        已完成: {answers2.filter(a => a.selectedOption !== null).length}/{quizQuestions2.length}
      </span>
      {submitted2 && (
        <span className="font-medium text-indigo-600">
          你的得分: {score2}/{totalPossibleScore2}
        </span>
      )}
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
        style={{ 
          width: `${(answers2.filter(a => a.selectedOption !== null).length / quizQuestions2.length) * 100}%` 
        }}
      ></div>
    </div>
  </div>
  
  {/* 题目列表：间距+内边距压缩 */}
  <div className="space-y-2">
    {quizQuestions2.map((question, questionIndex) => (
      <div 
        key={question.id} 
        className="p-3 border rounded-lg transition-all hover:shadow-sm"
        style={{
          borderColor: answers2[questionIndex].selectedOption !== null ? '#6366f1' : '#e5e7eb'
        }}
      >
        <div className="flex items-start mb-2"> {/* 题目标题底部间距减少 */}
          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center font-medium mr-2 mt-0.5">
            {question.id}
          </span>
          <h3 className="text-base font-semibold text-gray-800">{question.question}</h3> {/* 题目文字缩小 */}
        </div>
        
        {/* 选项组：缩进+内边距+间距缩减 */}
        <div className="pl-8 flex flex-wrap gap-2">
          {question.options.map((option, optionIndex) => {
            const isSelected = answers2[questionIndex].selectedOption === optionIndex;
            
            let labelClasses = "flex items-center p-1.5 rounded transition-all cursor-pointer whitespace-nowrap text-sm";
            let radioClasses = "w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300";
            
            if (!submitted2) {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " hover:bg-gray-50 border border-transparent hover:border-gray-200";
            } else {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " bg-gray-50 border border-gray-200";
              radioClasses += " cursor-not-allowed";
            }
            
            return (
              <label 
                key={optionIndex}
                htmlFor={`q${question.id}-opt${optionIndex}`}
                className={labelClasses}
                onClick={() => handleOptionSelect2(questionIndex, optionIndex)}
                style={{ cursor: submitted2 ? 'default' : 'pointer' }}
              >
                <input
                  id={`q${question.id}-opt${optionIndex}`}
                  type="radio"
                  name={`question-${question.id}`}
                  checked={isSelected}
                  disabled={submitted2}
                  className={radioClasses}
                  readOnly
                />
                <span className="ml-1.5"> {/* 选项文字与单选框间距减少 */}
                  {option.text}
                  <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-100 rounded-full text-gray-700">
                    {option.score}分
                  </span>
                </span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
  
  {/* 提交区：按钮内边距+结果区边距缩减 */}
  <div className="mt-4">
    {!submitted2 ? (
      <button
        onClick={handleSubmit2}
        disabled={!allAnswered2}
        className={`w-full py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm ${
          allAnswered2
            ? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
            : 'bg-gray-200 text-gray-500 cursor-not-allowed'
        }`}
      >
        提交答案
      </button>
    ) : (
      <div className="p-3 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
        <h3 className="text-lg font-bold text-center mb-1 text-indigo-700">测验完成！</h3> {/* 结果标题缩小+间距减少 */}
        <p className="text-center mb-2 text-sm"> {/* 结果文字缩小+间距减少 */}
         
          <span className="block text-xs text-gray-600 mt-1"> {/* 病情提示文字缩小 */}
            病情: {score2<7?"无":"气虚"}
          </span>
        </p>
        <button
          onClick={handleRestart2}
          className="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm"
        >
          重新开始测验
        </button>
      </div>
    )}
  </div>
</div>


<div style={{ display: isVisible1 ? 'block' : 'none'}} className="max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-4 md:p-5">
  {/* 标题：字体缩小+底部间距减少 */}
  <h1 className="text-2xl font-bold text-center mb-3 text-indigo-600">阳虚体质</h1>
  
  {/* 进度显示：内边距+底部间距缩减 */}
  <div className="mb-3 p-3 bg-indigo-50 rounded-lg">
    <div className="flex justify-between items-center mb-2">
      <span className="font-medium text-gray-700">
        已完成: {answers1.filter(a => a.selectedOption !== null).length}/{quizQuestions1.length}
      </span>
      {submitted1 && (
        <span className="font-medium text-indigo-600">
          你的得分: {score1}/{totalPossibleScore1}
        </span>
      )}
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
        style={{ 
          width: `${(answers1.filter(a => a.selectedOption !== null).length / quizQuestions1.length) * 100}%` 
        }}
      ></div>
    </div>
  </div>
  
  {/* 题目列表：间距+内边距压缩 */}
  <div className="space-y-2">
    {quizQuestions1.map((question, questionIndex) => (
      <div 
        key={question.id} 
        className="p-3 border rounded-lg transition-all hover:shadow-sm"
        style={{
          borderColor: answers1[questionIndex].selectedOption !== null ? '#6366f1' : '#e5e7eb'
        }}
      >
        <div className="flex items-start mb-2"> {/* 题目标题底部间距减少 */}
          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center font-medium mr-2 mt-0.5">
            {question.id}
          </span>
          <h3 className="text-base font-semibold text-gray-800">{question.question}</h3> {/* 题目文字缩小 */}
        </div>
        
        {/* 选项组：缩进+内边距+间距缩减 */}
        <div className="pl-8 flex flex-wrap gap-2">
          {question.options.map((option, optionIndex) => {
            const isSelected = answers1[questionIndex].selectedOption === optionIndex;
            
            let labelClasses = "flex items-center p-1.5 rounded transition-all cursor-pointer whitespace-nowrap text-sm";
            let radioClasses = "w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300";
            
            if (!submitted1) {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " hover:bg-gray-50 border border-transparent hover:border-gray-200";
            } else {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " bg-gray-50 border border-gray-200";
              radioClasses += " cursor-not-allowed";
            }
            
            return (
              <label 
                key={optionIndex}
                htmlFor={`q${question.id}-opt${optionIndex}`}
                className={labelClasses}
                onClick={() => handleOptionSelect1(questionIndex, optionIndex)}
                style={{ cursor: submitted1 ? 'default' : 'pointer' }}
              >
                <input
                  id={`q${question.id}-opt${optionIndex}`}
                  type="radio"
                  name={`question-${question.id}`}
                  checked={isSelected}
                  disabled={submitted1}
                  className={radioClasses}
                  readOnly
                />
                <span className="ml-1.5"> {/* 选项文字与单选框间距减少 */}
                  {option.text}
                  <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-100 rounded-full text-gray-700">
                    {option.score}分
                  </span>
                </span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
  
  {/* 提交区：按钮内边距+结果区边距缩减，保留"阴虚"判断逻辑 */}
  <div className="mt-4">
    {!submitted1 ? (
      <button
        onClick={handleSubmit1}
        disabled={!allAnswered1}
        className={`w-full py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm ${
          allAnswered1
            ? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
            : 'bg-gray-200 text-gray-500 cursor-not-allowed'
        }`}
      >
        提交答案
      </button>
    ) : (
      <div className="p-3 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
        <h3 className="text-lg font-bold text-center mb-1 text-indigo-700">测验完成！</h3> {/* 结果标题缩小+间距减少 */}
        <p className="text-center mb-2 text-sm"> {/* 结果文字缩小+间距减少 */}
        
          <span className="block text-xs text-gray-600 mt-1"> {/* 病情提示文字缩小，保留阴虚判断 */}
            病情: {score1<7?"无":"阳虚"}
          </span>
        </p>
        <button
          onClick={handleRestart1}
          className="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm"
        >
          重新开始测验
        </button>
      </div>
    )}
  </div>
</div>



      <div style={{ display: isVisible ? 'block' : 'none'}} className="max-w-5xl mx-auto bg-white rounded-xl shadow-lg p-4 md:p-5">
  {/* 标题：字体缩小+底部间距减少 */}
  <h1 className="text-2xl font-bold text-center mb-3 text-indigo-600">阴虚体质</h1>
  
  {/* 进度显示：内边距+底部间距缩减 */}
  <div className="mb-3 p-3 bg-indigo-50 rounded-lg">
    <div className="flex justify-between items-center mb-2">
      <span className="font-medium text-gray-700">
        已完成: {answers.filter(a => a.selectedOption !== null).length}/{quizQuestions.length}
      </span>
      {submitted && (
        <span className="font-medium text-indigo-600">
          你的得分: {score}/{totalPossibleScore}
        </span>
      )}
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
        style={{ 
          width: `${(answers.filter(a => a.selectedOption !== null).length / quizQuestions.length) * 100}%` 
        }}
      ></div>
    </div>
  </div>
  
  {/* 题目列表：间距+内边距压缩 */}
  <div className="space-y-2">
    {quizQuestions.map((question, questionIndex) => (
      <div 
        key={question.id} 
        className="p-3 border rounded-lg transition-all hover:shadow-sm"
        style={{
          borderColor: answers[questionIndex].selectedOption !== null ? '#6366f1' : '#e5e7eb'
        }}
      >
        <div className="flex items-start mb-2"> {/* 题目标题底部间距减少 */}
          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-800 flex items-center justify-center font-medium mr-2 mt-0.5">
            {question.id}
          </span>
          <h3 className="text-base font-semibold text-gray-800">{question.question}</h3> {/* 题目文字缩小 */}
        </div>
        
        {/* 选项组：缩进+内边距+间距缩减 */}
        <div className="pl-8 flex flex-wrap gap-2">
          {question.options.map((option, optionIndex) => {
            const isSelected = answers[questionIndex].selectedOption === optionIndex;
            
            let labelClasses = "flex items-center p-1.5 rounded transition-all cursor-pointer whitespace-nowrap text-sm";
            let radioClasses = "w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300";
            
            if (!submitted) {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " hover:bg-gray-50 border border-transparent hover:border-gray-200";
            } else {
              labelClasses += isSelected 
                ? " bg-indigo-50 border border-indigo-200" 
                : " bg-gray-50 border border-gray-200";
              radioClasses += " cursor-not-allowed";
            }
            
            return (
              <label 
                key={optionIndex}
                htmlFor={`q${question.id}-opt${optionIndex}`}
                className={labelClasses}
                onClick={() => handleOptionSelect(questionIndex, optionIndex)}
                style={{ cursor: submitted ? 'default' : 'pointer' }}
              >
                <input
                  id={`q${question.id}-opt${optionIndex}`}
                  type="radio"
                  name={`question-${question.id}`}
                  checked={isSelected}
                  disabled={submitted}
                  className={radioClasses}
                  readOnly
                />
                <span className="ml-1.5"> {/* 选项文字与单选框间距减少 */}
                  {option.text}
                  <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-100 rounded-full text-gray-700">
                    {option.score}分
                  </span>
                </span>
              </label>
            );
          })}
        </div>
      </div>
    ))}
  </div>
  
  {/* 提交区：按钮内边距+结果区边距缩减，保留"得分率"显示逻辑 */}
  <div className="mt-4">
    {!submitted ? (
      <button
        onClick={handleSubmit}
        disabled={!allAnswered}
        className={`w-full py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm ${
          allAnswered
            ? 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500'
            : 'bg-gray-200 text-gray-500 cursor-not-allowed'
        }`}
      >
        提交答案
      </button>
    ) : (
      <div className="p-3 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg border border-indigo-100">
        <h3 className="text-lg font-bold text-center mb-1 text-indigo-700">测验完成！</h3> {/* 结果标题缩小+间距减少 */}
        <p className="text-center mb-2 text-sm"> {/* 结果文字缩小+间距减少 */}
         
          <span className="block text-xs text-gray-600 mt-1"> {/* 保留得分率显示，缩小文字 */}
            病情: {score<7?"无":"阴虚"}
          </span>
        </p>
        <button
          onClick={handleRestart}
          className="w-full py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm"
        >
          重新开始测验
        </button>
      </div>
    )}
  </div>
</div>
</div>
    </div>
  );
};

export default FinalScoreQuiz;